<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content4" ContentPlaceHolderID="HeadContent" runat="server">
    <% Ajax.RenderResources<CollapsiblePanelExtender>(); %>
    <% Ajax.RenderResources<CascadingDropDownExtender>(); %>

    <script type="text/javascript">
        function Submit() {
            $get("form1").onsubmit();
        }
    </script>

</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    CascadingDropDown Demonstration
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="demoarea">
        <div class="demoheading">
            CascadingDropDown Demonstration</div>
        <% using (Ajax.BeginForm("Index", null, new AjaxOptions() { UpdateTargetId = "Response" }, new { id = "form1", name = "form1" }))
           { %>
        <table>
            <tr>
                <td>
                    Make
                </td>
                <td>
                    <%= Html.DropDownList("make", Enumerable.Empty<SelectListItem>(), new { style = "width: 170px;" })%>
                </td>
            </tr>
            <tr>
                <td>
                    Model
                </td>
                <td>
                    <%= Html.DropDownList("model", Enumerable.Empty<SelectListItem>(), new { style = "width: 170px;" })%>
                </td>
            </tr>
            <tr>
                <td>
                    Color
                </td>
                <td>
                    <%= Html.DropDownList("color", Enumerable.Empty<SelectListItem>(), new { style = "width: 170px;", onchange = "javascript:Submit()" })%>
                </td>
            </tr>
        </table>
        <% } %>
        <br />
        <% Ajax.RegisterScript(new CascadingDropDownExtender("make")
           {
               Category = "Make",
               PromptText = "Please select a make",
               LoadingText = "[Loading makes...]",
               ServicePath = "/CascadingDropDown",
               ServiceMethod = "GetDropDownContents",
           }); %>
        <% Ajax.RegisterScript(new CascadingDropDownExtender("model")
           {
               Category = "Model",
               PromptText = "Please select a model",
               LoadingText = "[Loading models...]",
               ServicePath = "/CascadingDropDown",
               ServiceMethod = "GetDropDownContents",
               ParentControlID = "make"
           }); %>
        <% Ajax.RegisterScript(new CascadingDropDownExtender("color")
           {
               Category = "Color",
               PromptText = "Please select a color",
               LoadingText = "[Loading colors...]",
               ServicePath = "/CascadingDropDown",
               ServiceMethod = "GetDropDownContents",
               ParentControlID = "model"
           }); %>
        <div id="Response">
            <% Html.RenderPartial("Response"); %>
        </div>
    </div>
    <div class="demobottom">
    </div>
    <div id="Description_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Description_ToggleImage" src="/Content/Images/collapse.jpg" alt="collapse" />
            CascadingDropDown Description
        </div>
    </div>
    <div id="Description_ContentPanel" style="overflow: hidden;">
        <p>
            CascadingDropDown is an ASP.NET AJAX extender that can be attached to an select
            element to get automatic population of a set of select element items. Each time
            the selection of one the select element controls changes, the CascadingDropDown
            makes a call to a specified web service to retrieve the list of values for the next
            select element in the set.
        </p>
        <br />
        <p>
            CascadingDropDown enables a common scenario in which the contents of one list depends
            on the selection of another list and does so without having to embed the entire
            data set in the page or transfer it to the client at all. All the logic about the
            contents of the set of select element items lives on the server in a web service.
            This web service can use any suitable method for storing and looking up the relevant
            data. The sample web service used here reads the data set from a simple hierarchical
            XML data file. The sample data file shows that the select element items can have
            distinct names and value (values are optional in the sample).
            <%-- There is also a walkthrough
            showing how to use a <a href="../Walkthrough/CCDWithDB.aspx">CascadingDropDown with a database </a>.--%>
        </p>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Description_ContentPanel")
       {
           ExpandControlID = "Description_HeaderPanel",
           CollapseControlID = "Description_HeaderPanel",
           Collapsed = false,
           ImageControlID = "Description_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
    <div id="Properties_HeaderPanel" style="cursor: pointer;">
        <div class="heading">
            <img id="Properties_ToggleImage" src="/Content/Images/expand.jpg" alt="expand" />
            CascadingDropDown Properties
        </div>
    </div>
    <div id="Properties_ContentPanel" style="overflow: hidden; height: 0px">
        <p>
            The control above is initialized with this code. The <em>italic</em> properties
            are optional:
        </p>
        <pre>Ajax.RegisterScript(new CascadingDropDownExtender("model") {
    Category="Model",
    <em>PromptText</em>="Please select a model",
    <em>LoadingText</em>="[Loading models...]",
    <em>ServicePath</em>="/CascadingDropDown",
    ServiceMethod="GetDropDownContents",
    <em>ParentControlID</em>="make",
    <em>SelectedValue</em>="SomeValue" } );</pre>
        <ul>
            <li><strong>Constructor parameter</strong> - The ID of the select element to populate.</li>
            <li><strong>Category</strong> - The name of the category this DropDownList represents.</li>
            <li><strong>PromptText</strong> - Optional text to display before the user has selected
                a value from the DropDownList.</li>
            <li><strong>PromptValue</strong> - Optional value set when PromptText is displayed.</li>
            <li><strong>EmptyText</strong> - Optional text to display when the DropDownList has
                no data to display.</li>
            <li><strong>EmptyValue</strong> - Optional value set when EmptyText is displayed.</li>
            <li><strong>LoadingText</strong> - Optional text to display while the data for the DropDownList
                is being loaded.</li>
            <li><strong>ServicePath</strong> - Path to a web service that returns the data used
                to populate the DropDownList. This property should be left null if ServiceMethod
                refers to a page method. The web service should be decorated with the System.Web.Script.Services.ScriptService
                attribute.</li>
            <li><strong>ServiceMethod</strong> - Web service method that returns the data used to
                populate the DropDownList. The signature of this method must match the following:
                <pre>
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public CascadingDropDownNameValue[] GetDropDownContents(
       string knownCategoryValues, string category) { ... }</pre>
                Note that you can replace "GetDropDownContents" with a naming of your choice, but
                the return type and parameter name and type must exactly match, including case.</li>
            <li><strong>ContextKey</strong> - User/page specific context provided to an optional
                overload of the web method described by ServiceMethod/ServicePath. If the context
                key is used, it should have the same signature with an additional parameter named
                contextKey of type string:
                <pre>
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public CascadingDropDownNameValue[] GetDropDownContents(
       string knownCategoryValues, string category, string contextKey) { ... }</pre>
                Note that you can replace "GetDropDownContents" with a name of your choice, but
                the return type and parameter name and type must exactly match, including case.</li>
            <li><strong>UseContextKey</strong> - Whether or not the ContextKey property should be
                used. This will be automatically enabled if the ContextKey property is ever set
                (on either the client or the server). If the context key is used, it should have
                the same signature with an additional parameter named contextKey of type string
                (as described above).</li>
            <li><strong>ParentControlID</strong> - Optional ID of the parent DropDownList that controls
                the contents of this DropDownList.</li>
            <li><strong>SelectedValue</strong> - Optional value to select by default. This needs
                to exactly match the string representation of a value in the DropDownList.</li>
        </ul>
    </div>
    <% Ajax.RegisterScript(new CollapsiblePanelExtender("Properties_ContentPanel")
       {
           ExpandControlID = "Properties_HeaderPanel",
           CollapseControlID = "Properties_HeaderPanel",
           Collapsed = true,
           ImageControlID = "Properties_ToggleImage",
           ExpandedImage = "/Content/Images/collapse.jpg",
           CollapsedImage = "/Content/Images/expand.jpg",
       }); %>
</asp:Content>
